<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{width:100px;height:100px;background:blue;}
</style>
<script>

/*
function toWidth(){
	var oDiv=document.getElementById('div1');
	
	oDiv.style.width='200px';
}
function toHeight(){
	var oDiv=document.getElementById('div1');
	
	oDiv.style.height='200px';
}
function toColor(){
	var oDiv=document.getElementById('div1');
	
	oDiv.style.background='red';
}*/
function setStyle(name,value)
{
	//当 点 换为 [] 号时，括号里可以放 变量和字符串
	//[]的好处：可变
	var oDiv=document.getElementById('div1');
	//得用第二种操作属性的方式
	oDiv.style[name]=value;
//  oDiv.style.name = value;
	//如下写时，电脑会认为你是要操作一个叫name属性的值
	//oDiv.style.name=value;
	}
</script>
</head>

<body>
<input type="button" value="变宽" onclick="setStyle('width','200px')"/>
<input type="button" value="变高" onclick="setStyle('height','200px')" />
<input type="button" value="变绿" onclick="setStyle('background','red')" />
<div id="div1">
</div>
</body>
</html>
